{% block sw_settings_country_address_handling %}
<div class="sw-settings-country-address-handling">
    {% block sw_settings_country_address_handling_options %}
    <mt-card
        position-identifier="sw-settings-country-address-handling-options"
        :title="$tc('sw-settings-country.detail.titleOptions')"
        :is-loading="isLoading"
    >
        <sw-container class="sw-settings-country-address-handling__options-container">

            <mt-switch
                :model-value="country.forceStateInRegistration"
                class="sw-settings-country-address-handling__option-items"
                bordered
                :disabled="!acl.can('country.editor') || undefined"
                :label="$tc('sw-settings-country.detail.labelForceStateInRegistration')"
                @update:model-value="updateCountry('forceStateInRegistration', $event)"
            />

            <mt-switch
                :model-value="country.postalCodeRequired"
                class="sw-settings-country-address-handling__option-items"
                bordered
                :disabled="!acl.can('country.editor') || undefined"
                :label="$tc('sw-settings-country.detail.labelPostalCodeRequired')"
                @update:model-value="updateCountry('postalCodeRequired', $event)"
            />

            <mt-switch
                :model-value="country.checkPostalCodePattern"
                class="sw-settings-country-address-handling__option-items"
                bordered
                :disabled="!hasDefaultPostalCodePattern || !acl.can('country.editor') || undefined"
                :label="$tc('sw-settings-country.detail.labelCheckPostalCodePattern')"
                :help-text="$tc('sw-settings-country.detail.helpTextCheckPostalCodePattern')"
                @update:model-value="updateCountry('checkPostalCodePattern', $event)"
            />

            <div class="sw-settings-country-address-handling__option-items advanced-postal-code">

                <mt-switch
                    :model-value="country.checkAdvancedPostalCodePattern"
                    class="sw-settings-country-address-handling__option-items"
                    :disabled="!acl.can('country.editor') || disabledAdvancedPostalCodePattern || undefined"
                    :label="$tc('sw-settings-country.detail.labelCheckAdvancedPostalCodePattern')"
                    :help-text="$tc('sw-settings-country.detail.helpTextAdvancedPostalCodePattern', {5: '{5}', 4: '{4}', 2: '{2}'}, 0)"
                    @update:model-value="updateCountry('checkAdvancedPostalCodePattern', $event)"
                />

                <mt-text-field
                    :model-value="country.advancedPostalCodePattern"
                    class="sw-settings-country-address-handling__text-field"
                    :class="{'is--disabled': !country.checkAdvancedPostalCodePattern}"
                    :disabled="!acl.can('country.editor') || undefined"
                    :placeholder="$tc('sw-settings-country.detail.placeholderAdvancedPostalCodePattern')"
                    @update:model-value="updateCountry('advancedPostalCodePattern', $event)"
                />
            </div>
        </sw-container>
    </mt-card>
    {% endblock %}

    {% block sw_settings_country_address_handling_formatting %}
    <mt-card
        position-identifier="sw-settings-country-address-handling-formatting"
        :title="$tc('sw-settings-country.detail.titleFormatting')"
        :is-loading="isLoading"
    >
        <sw-container class="sw-settings-country-address-handling__options-container">
            <div class="sw-settings-country-address-handling__address-markup">
                <sw-multi-snippet-drag-and-drop
                    v-for="(snippet, index) in addressFormat"
                    :key="index"
                    v-droppable="{ data: { snippet, index }, dragGroup: 'sw-multi-snippet' }"
                    v-draggable="{ ...dragConf, data: { snippet, index }}"
                    :value="snippet"
                    :line-position="index"
                    :get-label-property="getLabelProperty"
                    :total-lines="addressFormat.length"
                    @update:value="change"
                    @drop-end="onDropEnd"
                    @position-move="moveToNewPosition"
                    @add-new-line="addNewLineAt"
                    @open-snippet-modal="openSnippetModal"
                />
            </div>

            <div class="sw-settings-country-address-handling__address-preview">
                <div class="sw-card__title">
                    {{ $tc('sw-settings-country.detail.previewTitle') }}
                </div>

                <sw-entity-single-select
                    v-model:value="customerId"
                    class="sw-settings-country-address-handling__customer-select"
                    :label="$tc('sw-settings-country.detail.labelCustomer')"
                    :placeholder="$tc('sw-settings-country.detail.placeholderSelectCustomer')"
                    entity="customer"
                    show-clearable-button
                    :criteria="customerCriteria"
                    :label-callback="customerLabel"
                    @update:value="onChangeCustomer"
                />

                <sw-settings-country-preview-template :formatting-address="formattingAddress" />

                <mt-button
                    class="sw-settings-country-address-handling__button-reset"
                    variant="critical"
                    ghost
                    @click="resetMarkup"
                >
                    {{ $tc('sw-settings-country.detail.buttonResetMarkup') }}
                </mt-button>
            </div>
        </sw-container>
    </mt-card>

    <sw-settings-country-new-snippet-modal
        v-if="isOpenModal"
        :selections="snippets"
        :current-position="currentPosition"
        :address-format="addressFormat"
        :get-label-property="getLabelProperty"
        @change="change"
        @modal-close="onCloseModal"
    />
    {% endblock %}
</div>
{% endblock %}
